<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '220px'" class="sidebar">
      <div class="logo">
        <img src="/favicon.ico" alt="Logo" class="logo-icon" />
        <span v-show="!isCollapse" class="logo-text">FreePortal</span>
      </div>

      <el-menu :default-active="currentRoute" class="sidebar-menu" :collapse="isCollapse" background-color="#304156"
        text-color="#bfcbd9" active-text-color="#409EFF" router>
        <el-menu-item index="/dashboard">
          <el-icon>
            <Platform />
          </el-icon>
          <template #title>工作台</template>
        </el-menu-item>

        <el-sub-menu index="park">
          <template #title>
            <el-icon>
              <OfficeBuilding />
            </el-icon>
            <span>园区管理</span>
          </template>
          <el-menu-item index="/park/student">楼宇管理</el-menu-item>
          <el-menu-item index="/park/enterprise">企业管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="industry">
          <template #title>
            <el-icon>
              <TrendCharts />
            </el-icon>
            <span>行车管理</span>
          </template>
          <el-menu-item index="/industry/area">区域管理</el-menu-item>
          <el-menu-item index="/industry/monthly">月卡管理</el-menu-item>
          <el-menu-item index="/industry/temp">停车缴费管理</el-menu-item>
          <el-menu-item index="/industry/rule">计费规则管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/property">
          <el-icon>
            <Grid />
          </el-icon>
          <template #title>物业费管理</template>
        </el-menu-item>

        <el-sub-menu index="integration">
          <template #title>
            <el-icon>
              <Collection />
            </el-icon>
            <span>一体化管理</span>
          </template>
          <el-menu-item index="/integration/manage">一体化管理</el-menu-item>
          <el-menu-item index="/integration/notice">告警记录</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="lottery">
          <template #title>
            <el-icon>
              <Present />
            </el-icon>
            <span>抽奖管理</span>
          </template>
          <el-menu-item index="/lottery/category">奖品分类</el-menu-item>
          <el-menu-item index="/lottery/prizes">奖品列表</el-menu-item>
          <el-menu-item index="/lottery/draws">抽奖列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="system">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/system/employee">员工管理</el-menu-item>
          <el-menu-item index="/system/role">角色管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <el-container style="display: flex; flex-direction: column; height: 100vh; flex: 1;">
      <!-- 顶部导航 -->
      <el-header class="header">
        <div class="header-left">
          <el-button text @click="toggleSidebar" class="collapse-btn">
            <el-icon>
              <Expand v-if="isCollapse" />
              <Fold v-else />
            </el-icon>
          </el-button>
        </div>

        <div class="header-right">
          <el-button type="primary" plain>可视化大屏</el-button>
          <el-dropdown @command="handleCommand">
            <span class="user-dropdown">
              <el-icon>
                <Avatar />
              </el-icon>
              FreePortal管理员
              <el-icon class="el-icon--right">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { logout } from '@/utils/auth'

const route = useRoute()
const router = useRouter()
const isCollapse = ref(false)

const currentRoute = computed(() => route.path)

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const handleCommand = (command: string) => {
  if (command === 'logout') {
    // 处理退出登录
    ElMessageBox.confirm(
      '确定要退出登录吗？',
      '退出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      logout()
      ElMessage.success('已退出登录')
      router.push('/login')
    }).catch(() => {
      // 取消退出
    })
  } else if (command === 'profile') {
    // 处理个人信息
    ElMessage.info('个人信息功能开发中')
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.layout-container .el-container {
  height: 100%;
  width: 100%;
}

.sidebar {
  background-color: #304156;
  transition: width 0.3s;
  height: 100vh;
  flex-shrink: 0;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-bottom: 1px solid #434a50;
}

.logo-icon {
  width: 32px;
  height: 32px;
}

.logo-text {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.sidebar-menu {
  border: none;
  height: calc(100vh - 60px);
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  color: #606266;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
}

.user-dropdown .el-icon {
  margin: 0 5px;
}

.main-content {
  background-color: #f0f2f5;
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  flex: 1;
}
</style>
